<template>
    <div class="bottom-bar">
        <div class="check-content">
            <check-button 
                :isChecked="isSelectAll"  
                class="check-button"
                @click.native="checkClick"/>
            <span>全选</span>
        </div>
        <div class="price">
            合计:￥{{totalPrice}}
        </div>
        <div class="calculate" @click="calcClick">
            去计算({{checkLength}})
        </div>
    </div>
</template>

<script>
import CheckButton from "components/content/checkButton/CheckButton"

import {mapGetters} from "vuex"

export default {
    name: "CartBottomBar",
    components: {
        CheckButton,
    },
    computed: {
        ...mapGetters(['cartList']),
        totalPrice() {
            return this.cartList.filter(item => {
                return item.check
            }).reduce((preValue, item) => {
                return preValue + item.price * item.count
            }, 0)
        },
        checkLength() {
            return this.cartList.filter(item => item.check).length
        },
        isSelectAll() {
            if(this.cartList.length == 0) {
                return false
            }
            // return !this.cartList.filter(item => !item.check).length
            return !this.cartList.find(item => !item.check)
        }
    },
    methods: {
        checkClick() {
            if(this.isSelectAll) {
                this.cartList.forEach(item => item.check = false);
            } else {
                this.cartList.forEach(item => item.check = true);
            }
        },
        calcClick() {
            if(!this.isSelectAll) {
                this.$toast.show("请选择购买的商品", 2000)
            }
        }
    }

}
</script>

<style scoped>
    .bottom-bar {
        position: relative;
        display: flex;
        line-height: 40px;
        height: 40px;
        background-color: #eee;
        font-size: 14px;
    }
    .check-content {
        display: flex;
        align-items: center;
        margin-left: 10px;
        width: 60px;
    }
    .check-button {
        width: 20px;
        line-height: 20px;
        margin-right: 5px;
    }

    .price {
        margin-left: 10px;
        flex: 1;
    }
    .calculate {
        width: 100px;
        background-color: red;
        color: #fff;
        text-align: center;
    }
</style>